<template>
  <div class="item-list">
    <div
      class="item-cell"
      @click="goodClick(item.id)"
      v-for="item in goodsLists"
    >
      <div class="item-img"><img :src="item.img_show" alt="" /></div>
      <div class="item-title">
        {{ item.name }}
      </div>
      <div class="info" v-if="vip_rule !== 0">
        <div
          v-if="
            item.is_points === 1 ||
              (item.is_points != 0 && !item.is_points && item.points) ||
              (item.is_points != 0 &&
                item.price &&
                (item.points || item.points === 0))
          "
          class="price"
        >
          <div class="vip-price">
            {{ -item.price ? "￥" : "" }}{{ -item.price ? item.price : ""
            }}{{ -item.price ? "+" : "" }}{{ item.points }}积分
          </div>
        </div>
        <div v-else class="price">
          <div style="margin-right:0.2rem;" v-if="level" class="vip-price">
            ¥{{ item.discount_price }} <span class="vip-tag">VIP</span>
          </div>
          <div class="normal-price">¥{{ item.price }}</div>
        </div>
      </div>
      <div class="info" v-else>
        <div class="price">
          <div style="margin-right:0.2rem;" class="vip-price">
            ¥{{ item.price }}
          </div>
          <div class="normal-price" style="text-decoration: line-through;">¥{{ item.original_price }}</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { mapState, mapMutations } from "vuex";
export default {
  props: ["goodsLists"],
  data() {
    return {};
  },
  computed: {
    ...mapState({
      level: state => state.user.level,
      vip_rule: state => state.app.vip_rule
    })
  },
  methods: {
    ...mapMutations(["setRelatedGood"]),
    goodClick(id) {
      if (this.$route.query.action === "relate") {
        this.setRelatedGood(id);
        this.$router.replace("/new-dynamics-video");
      } else {
        this.$router.push("/item-detail/" + id);
      }
    }
  }
};
</script>

<style lang="less" scoped>
.item-list {
  background-color: #fff;
  padding: 0.58rem 3.2%;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  .item-cell {
    border: 1px solid rgba(233, 233, 233, 1);
    width: 6.9rem;
    margin-bottom: 0.48rem;
    .item-img {
      height: 6.9rem;
      width: 100%;
      background-color: #dfdfdf;
      img {
        width: 100%;
        height: 100%;
        object-fit: cover;
      }
    }
    .item-title {
      color: rgba(68, 68, 68, 1);
      font-size: 0.58rem;
      line-height: 0.6rem;
      display: -webkit-box;
      -webkit-box-orient: vertical;
      overflow: hidden;
      -webkit-line-clamp: 2;
      margin: 0.4rem;
      height: 1.2rem;
    }
    .info {
      margin: 0 0.4rem;
      display: flex;
      justify-content: space-between;
      .price {
        display: flex;
        line-height: 1.4rem;
        align-items: flex-end;
        .vip-price {
          font-weight: bold;
          color: rgba(244, 67, 73, 1);
          font-size: 0.58rem;
          .vip-tag {
            color: rgba(255, 255, 255, 1);
            font-size: 0.4rem;
            background: rgba(244, 67, 73, 1);
            border-radius: 0.12rem;
            padding: 0 0.1rem;
          }
        }
        .normal-price {
          font-weight: bold;
          color: rgba(68, 68, 68, 1);
          font-size: 0.48rem;
          // margin-right: 0.48rem;
        }
      }
      .sale {
        color: rgba(153, 153, 153, 1);
        font-size: 0.48rem;
      }
    }
  }
}
</style>
